/**
* @file  Dev 基础表格组件
* @description  基础表格组件
* @author xiao_xie
* @date 2025-03-21
*/


import { Space, Table, TableProps, Tag } from 'antd';
import React, { useEffect } from 'react';
import http from '../../../../utils/http';


type DevProps = {
  id: number
  title?: string; // 标题
  dataColumn?: { // 数据列
    key: string; // 列的唯一标识
    title: string; // 列的标题
    dataIndex: string; // 列的数据索引
    render?: (text: string, record: any) => React.ReactNode; // 列的渲染函数
  }[];
  dataSource?: { // 数据源
    key: string; // 行的唯一标识
    [key: string]: any; // 行的数据
  }[]
  url?: string; // 接口地址
  isShowPagination: boolean; // 是否显示分页
  isShowHeader: boolean; // 是否显示表头
  isShowAction?: boolean; // 是否显示操作列
}

const Dev = ({ id, title = '默认标题', dataColumn = [], url = '', isShowHeader, isShowPagination, isShowAction }: DevProps) => {
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const [data, setData] = React.useState<DataType[]>([]);

  useEffect(() => {
    http.get(url).then((res) =>{
      setData(res); 
    })

  },[url])

  const handleColunms = () => {
    console.log('dataColumn', dataColumn)
    const newDataColumn = [...dataColumn];
    if (!isShowAction) {
      newDataColumn.pop();
    }
    return newDataColumn;
  }


  const tableTitle: TableProps<DataType>['title'] = () => <div>{isShowHeader ? title : null}</div>;

  return <div
    data-component-id={id}
  >
    <Table pagination={isShowPagination ? {} : false} columns={handleColunms()} dataSource={data} title={tableTitle} />
  </div>;
};
export default Dev;
